<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/formwizard/ui-lightness/jquery-ui-1.8.2.custom.css" />  
    <style type="text/css">
			#demoWrapper {
				padding : 1em;
				width : 500px;
				border-style: solid;
			}

			#fieldWrapper {
			}

			#demoNavigation {
				margin-top : 0.5em;
				margin-right : 1em;
				text-align: right;
			}
			
			#data {
				font-size : 0.7em;
			}

			input {
				margin-right: 0.1em;
				margin-bottom: 0.5em;
			}

			.input_field_25em {
				width: 2.5em;
			}

			.input_field_3em {
				width: 3em;
			}

			.input_field_35em {
				width: 3.5em;
			}

			.input_field_12em {
				width: 12em;
			}

			label {
				margin-bottom: 0.2em;
				font-weight: bold;
				font-size: 0.8em;
			}

			label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}

			.step span {
				float: right;
				font-weight: bold;
				padding-right: 0.8em;
			}

			.navigation_button {
				width : 70px;
			}
			
			#data {
					overflow : auto;
			}
		</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Add School</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/formWizard/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/formWizard/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/formWizard/bbq.js"></script>
<script type="text/javascript" src="js/formWizard/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript" src="js/formWizard/jquery.form.wizard.js"></script>
</head>
<body>
	<div id="schoolReg">
			<h3>School Registration</h3>
			<hr />
			<h5 id="status"></h5>
			<form id="schoolRegistrationForm" method="post" action="addSchool.htm" class="bbq">
				<div id="fieldWrapper">
				<span class="step" id="schoolDetails">
					<span class="font_normal_07em_black">First step - Enter School Details</span><br />
					<label for="schoolName">*School Name</label><br />
					<input class="input_field_12em required" name="schoolName" id="schoolName" /><br />
					<label for="schoolAlias">*School Alias</label><br />
					<input class="input_field_12em required" name="schoolAlias" id="schoolAlias" /><br />
					<hr/>
					<label>School Address</label><br/>
					<label for="line1">*Address Line 1</label><br/>
					<input class="input_field_12em required" name="line1" id="line1" /><br />
					<label for="line2">*Address Line 2</label><br/>
					<input class="input_field_12em required" name="line2" id="line2" /><br />
				</span>
				<span id="finland" class="step">
					<span class="font_normal_07em_black">Step 2 - Personal information</span><br />
					<label for="day_fi">Social Security Number</label><br />
					<input class="input_field_25em" name="day" id="day_fi" value="DD" />
					<input class="input_field_25em" name="month" id="month_fi" value="MM" />
					<input class="input_field_3em" name="year" id="year_fi" value="YYYY" /> - 
					<input class="input_field_3em" name="lastFour" id="lastFour_fi" value="XXXX" /><br />
					<label for="countryPrefix_fi">Phone number</label><br />
					<input class="input_field_35em" name="countryPrefix" id="countryPrefix_fi" value="+358" /> - 
					<input class="input_field_3em" name="areaCode" id="areaCode_fi" /> - 
					<input class="input_field_12em" name="phoneNumber" id="phoneNumber_fi" /><br />
					<label for="email">*Email</label><br />
					<input class="input_field_12em email required" name="myemail" id="myemail" /><br />	 						
				</span>
				<span id="confirmation" class="step">
					<span class="font_normal_07em_black">Last step - Username</span><br />
					<label for="username">User name</label><br />
					<input class="input_field_12em" name="username" id="username" /><br />
					<label for="password">Password</label><br />
					<input class="input_field_12em" name="password" id="password" type="password" /><br />
					<label for="retypePassword">Retype password</label><br />
					<input class="input_field_12em" name="retypePassword" id="retypePassword" type="password" /><br />
				</span>
				</div>
				<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
			</form>
			<hr />
			
			<p id="data"></p>
		</div>
	
	<script type="text/javascript">
	$(function() {
		$("#schoolRegistrationForm").formwizard(
				{
					formPluginEnabled : true,
					validationEnabled : true,
					focusFirstInput : true,
					formOptions : {
						success : function(data) {
							$("#status").fadeTo(
									500,
									1,
									function() {
										$(this).html("You are now registered!")
												.fadeTo(5000, 0);
									})
						},
						beforeSubmit : function(data) {
							$("#data")
									.html(
											"data sent to the server: "
													+ $.param(data));
						},
						dataType : 'json',
						resetForm : true
					}
				});
	});
</script>
</body>
</html>